<template>
  <div class="demo-use-model">
    <h4>单项绑定</h4>
    <DemoUseModelComponent v-model="val"/>
    <div><label for="modelValue">modelVal: </label>{{val}}</div>
    <hr>
    <h4>多值绑定</h4>
    <DemoUseModelComponent range v-model:start="start" v-model:end="end" />
    <div><label for="start">start: </label>{{start}}</div>
    <div><label for="end">end: </label>{{end}}</div>
    
  </div>
</template>

<script>
import { DemoUseModelComponent } from "./demo-use-model-component";

export default {
  name: "demo-use-model",
  components: { DemoUseModelComponent },
  data() {
    return {
      val: "val",
      start: 0,
      end: 10
    };
  }
};
</script>

<style>
</style>